<template>
  <div class="content" :style="bgImg">
    <div class="backBtn listBack" v-if="isGame" @click="back('home')">
      <img src="@/assets/imgs/game/butoon_back.webp" />
    </div>
    <div class="backBtn gameBack" v-else @click="back('game')">
      <img src="@/assets/imgs/game/butoon_back.webp" />
    </div>
    <div class="swiperBox" v-show="isGame">
      <div class="swiper-container" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
            <div class="showBox">
              <img :src="item.pic" alt="" />
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="des">Welcome to Park</div>
                <div class="startBtn" @click="start(i)">
                  <img src="@/assets/imgs/game/butoon_start2.webp" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>

    <iframe
      ref="gameiframe"
      class="game"
      :src="game_src"
      width="100%"
      height="650px"
      scrolling="auto"
      frameborder="0"
      v-if="!isGame"
    ></iframe
    > 
  </div>
</template>

<script>
import "swiper/css/swiper.css"; //引入swiper样式
import Swiper from "swiper"; //引入swiper
let vm = null;
export default {
  name: "",
  components: { Swiper },
  data() {
    return {
      isGame: true,
      coverImgUrl: "",
      activeSlide: 0,
      imgs: [
        {
          pic: require("@/assets/imgs/game/zombie_bunny.png"),
          name: "ZOMBIE BUNNY",
        },
        { pic: require("@/assets/imgs/game/j_jump.png"), name: "J-JUMP" },
        {
          pic: require("@/assets/imgs/game/cyber_wing.png"),
          name: "CYBER WING",
        },
      ],
      bgImgUrl: [
        require(`../assets/imgs/game/zombie_bunny_bg.jpg`),
        require(`../assets/imgs/game/j_jump_bg.jpg`),
        require(`../assets/imgs/game/cyber_wing_bg.png`),
      ],
      game_src: "",
      game_key: ["zombie_bunny", "j_jump", "cyber_wing"],
    };
  },
  watch: {},
  computed: {
    bgImg() {
      return {
        backgroundImage: "url(" + this.coverImgUrl + ")",
      };
    },
  },
  created() {
    vm = this;
    sessionStorage.removeItem("Official");
    this.coverImgUrl = this.bgImgUrl[0];
  },
  mounted() {
    new Swiper(".swiper-container", {
      //配置分页器内容
      loop: false, // 循环模式选项
      // speed: 1000,
      // autoplay: {
      //   delay: 3000,
      //   stopOnLastSlide: false,
      //   disableOnInteraction: false,
      // },
      effect: "flip",
      pagination: {
        el: ".swiper-pagination", //换页器与哪个标签关联
        clickable: true, //分页器是否可以点击
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      on: {
        slideChange() {
          vm.coverImgUrl = vm.bgImgUrl[this.activeIndex];
        },
      },
    });
  },
  methods: {
    back(tpye) {
      if (tpye == "home") {
        this.$router.push("/");
      } else {
        this.isGame = true;
      }
    },
    start(index) {
      this.game_src = `/webGL/${this.game_key[index]}/index.html`;
      this.isGame = false;
    },
  },
  beforeDestroy() {},
};
</script>

<style  lang="less" type="text/less" scoped>
.content {
  min-width: 1420px;
  max-width: 100%;
  height: 100vh;
  min-height: 900px;
  position: relative;
  background: no-repeat center;
  background-size: cover;
  .swiperBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .swiper-container {
      width: 37.5rem;
      height: 18.75rem;
      --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
      --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
      --swiper-navigation-size: 30px; /* 设置按钮大小 */
      .showBox {
        padding: 1.25rem 2.5rem;
        border-radius: 10px;
        background-color: rgba(24, 24, 24, 0.9);
        display: flex;
        position: relative;
        img {
          width: 15.625rem;
          height: 15.625rem;
        }
        .info {
          margin-left: 0.625rem;
          .name {
            font-size: 1.75rem;
            font-weight: 600;
            color: #fcff00;
            -webkit-text-stroke: 0;
          }
          .des {
            margin-top: 0.625rem;
            color: #fff;
            font-size: 1.125rem;
          }
          .startBtn {
            position: absolute;
            bottom: 1.5625rem;
            right: 2.8125rem;
            width: 5.7188rem;
            height: 4.875rem;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
            &:hover {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }

  .backBtn {
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .listBack {
    width: 7.5rem;
    height: 2.8125rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-18.75rem, -12.5rem);
    &:hover {
      transform: translate(-18.75rem, -12.5rem) scale(1.1);
    }
  }
  .gameBack {
    width: 120px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-510px, -365px);
    &:hover {
      transform: translate(-510px, -365px) scale(1.1);
    }
  }
  .game {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
